<template>
    <div>
        <v-snackbar class="custom-snackbar" @mouseenter="stopSnackbar" @mouseleave="startInterval" location="bottom right"
            :absolute="true" v-model="layout.snackbar" timeout="3000" color="#033">
            <div class="d-flex align-center justify-space-between">
                <p>{{ mesg?.barType == 'wise' ? '🚨🚨🚨 OnChain Events' : '🚨🚨🚨Big Volume Signal' }}</p>
                <v-icon size="x-small" class="icon" icon="mdi-close" @click="closeSnackbar"></v-icon>
            </div>
            <template v-if="mesg?.barType == 'wise'">
                <template v-if="mesg.contentText.action == 'deposit'">
                    <p class="contentText">Whale
                        <span class="text-link"
                            @click="openAddressUrl(mesg, mesg?.contentText.address || mesg?.contentText.fromTag || mesg?.contentText.fromEntityId)">【{{
                                isShortAddress(mesg.contentText.address || mesg.contentText.fromTag ||
                                    mesg.contentText.fromEntityId) }}】</span>
                        <span>{{ mesg.contentText.action }}&nbsp</span>
                        <span>{{ backAmout(mesg.contentText) }}</span>
                        <span>#{{ mesg.contentText.outSymbol }}</span>
                        <span>&nbsp(<JNumber prefix="$" :num="mesg.contentText.outusdt"></JNumber> USD)&nbsp to &nbsp</span>
                        <span>{{ isShortAddress(mesg.contentText.toAddress || mesg.contentText.toEntityId ||
                            mesg.contentText.toTag) }}</span>
                    </p>
                </template>
                <template v-else-if="mesg.contentText.action == 'withdraw'">
                    <p class="contentText">Whale
                        <span class="text-link"
                            @click="openAddressUrl(mesg, mesg?.contentText.toAddress || mesg?.contentText.toTag || mesg?.contentText.toEntityId)">【{{
                                isShortAddress(mesg.contentText.toAddress || mesg.contentText.toTag ||
                                    mesg.contentText.toEntityId) }}】</span>
                        <span>{{ mesg.contentText?.action }}&nbsp</span>
                        <span>{{ backAmout(mesg.contentText) }}</span>
                        <span>#{{ mesg.contentText.outSymbol }}</span>
                        <span>&nbsp(<JNumber prefix="$" :num="mesg.contentText.outusdt"></JNumber> USD)&nbsp from
                            &nbsp</span>
                        <span> {{ isShortAddress(mesg.contentText.address || mesg.contentText.fromTag ||
                            mesg.contentText.fromEntityId) }}</span>
                    </p>
                </template>
                <template v-else-if="mesg.contentText.toAddressType == 'fund'">
                    <p class="contentText">Whale
                        <span class="text-link"
                            @click="openAddressUrl(mesg, mesg?.contentText.toAddress || mesg?.contentText.toTag || mesg?.contentText.toEntityId)">【{{
                                isShortAddress(mesg.contentText.toAddress || mesg.contentText.toTag ||
                                    mesg.contentText.toEntityId) }}】</span>
                        <span>receive &nbsp</span>
                        <span>{{ backAmout(mesg.contentText) }}</span>
                        <span>#{{ mesg.contentText.outSymbol }}</span>
                        <span>&nbsp(<JNumber prefix="$" :num="mesg.contentText.outusdt"></JNumber> USD)&nbsp from
                            &nbsp</span>
                        <span> {{ isShortAddress(mesg.contentText.address || mesg.contentText.fromTag ||
                            mesg.contentText.fromEntityId) }}</span>
                    </p>
                </template>
                <template v-else>
                    <p class="contentText">Whale
                        <span class="text-link"
                            @click="openAddressUrl(mesg, mesg?.contentText.address || mesg?.contentText.fromTag || mesg?.contentText.fromEntityId)">【{{
                                isShortAddress(mesg.contentText.address || mesg.contentText.fromTag ||
                                    mesg.contentText.fromEntityId) }}】</span>
                        <span>{{ mesg.contentText.action }}&nbsp</span>
                        <span>{{ backAmout(mesg.contentText) }}</span>
                        <span>#{{ mesg.contentText.outSymbol }}</span>
                        <span>&nbsp(<JNumber prefix="$" :num="mesg.contentText.outusdt"></JNumber> USD)&nbsp to &nbsp</span>
                        <span>{{ isShortAddress(mesg.contentText.toAddress || mesg.contentText.toEntityId ||
                            mesg.contentText.toTag) }}</span>
                    </p>
                </template>
            </template>
            <template v-if="mesg?.barType == 'big'">
                <p class="bigContent">
                    Date: {{ mesg.timerStr }}<br />
                    <span class="symbol" @click="goDetails(mesg?.contentText.s)"> Symbol: {{ mesg.contentText.s }}
                    </span><br />
                    Direction: {{ mesg.contentText.d }}<br />
                    Price: {{ mesg.contentText.p }}<br />
                    Change: {{ mesg.contentText.r }}% 📈<br />
                    Volume: <JNumber prefix="$" :num="mesg.contentText.t"></JNumber><br />
                    SignalLevel: Level{{ mesg.contentText.L }}
                </p>
            </template>
        </v-snackbar>
    </div>
</template>
<script setup lang="ts">
import { useLayout } from '@/stores/layout';
import JNumber from "@/components/j-number/index.vue";
import { numberWithCommas } from "@/comm/format";
import { onMounted, onUnmounted, defineProps, computed, ref } from 'vue';
import { useRouter } from "vue-router";
import { useCore } from '@/hooks/useCore';
const router = useRouter();
interface DealRef {
    type?: string,
    action?: string,
    address?: string,
    fromAddressType?: string,
    fromEntityId?: string,
    fromTag?: string,
    toTag?: string,
    toEntityId?: string,
    toAddress?: string,
    toAddressType?: string,
    transactionHash?: string,
    timestamp?: number,
    outAmount?: number,
    outTokenAddress?: string,
    outSymbol?: string,
    inStable?: boolean,
    outStable?: boolean,
    outusdt?: number,
    s?: string,
    d?: string,
    p?: number,
    t?: number,
    L?: string
    r?: string
}
interface MessageRef {
    barType: string,
    contentText: DealRef,
    timerStr: number | string,
}
const fakerData = {
    "timerStr": "",
    "barType": "wise",
    "contentText": {
        "type": "transfer",
        "fromTag": "Curve.fi: USDT-WBTC-WETH (tricrypto2)",
        "fromAddressType": "dex",
        "toTag": "MEV Bot (0xa6)",
        "toAddressType": "fund",
        "transactionHash": "0xd39b5ded2cbce7fe8eacb6b5ece2e310f6435f99c3b6691c0e40e5fcd2ef8e87",
        "timestamp": 1705060019000,
        "outAmount": -114535.8306,
        "outTokenAddress": "0xdac17f958d2ee523a2206206994597c13d831ec7",
        "outSymbol": "USDT",
        "inStable": false,
        "outStable": true,
        "action": "transfer",
        "fromEntityId": "curve-fi",
        "toEntityId": "scp",
        "outusdt": 114535.830633
    }
}
const fakerData2 = {
    barType: 'big',
    timerStr: '2023-12-31',
    contentText: {
        "id": "65a127f30876d16dabfad6b2",
        "d": "LONG",
        "s": "NFPUSDT",
        "p": 0.667,
        "r": 1.894,
        "t": 1440543.611055,
        "L": 3,
        "T": 1705060260000
    }

}
let core = useCore()
const mesg = ref<MessageRef>();
let balance = computed(() => {
    return layout.contentText.lastChangeToken.changeBalance * layout.contentText.lastChangeToken.lastPrice
})
let timerId: any;
let layout = useLayout()
function closeSnackbar() {
    layout.changeSnackbar(false)
}
function backAmout(event: any) {
    if (event?.outAmount) {
        return numberWithCommas(Math.abs(event?.outAmount));
    } else {
        return numberWithCommas(Math.abs(event?.inAmount))
    }

}
onUnmounted(() => {
    clearInterval(timerId)
})
onMounted(() => {
    startInterval()
    // mesg.value = fakerData2
    // mesg.value = fakerData 

})
function startInterval() {
    console.log('鼠标范围外')
    timerId = window.setInterval(() => {
        if (layout.whaleList.length > 0) {
            let obj = layout.whaleList[0]
            mesg.value = obj
            console.log('获取推送的信息', mesg.value)
            let list = layout.whaleList.slice(1)
            layout.changeWhaleList(list)
            layout.changeSnackbar(true)
        } else {
            layout.changeSnackbar(false)
            mesg.value = {}
        }
    }, 3400)
}
//终止
function stopSnackbar() {
    console.log('鼠标范围中')
    clearInterval(timerId)
}
/**过滤地址和交易所名称 */
function intercept(char: string, num = 6) {
    // console.log('过滤地址!!!', char)
    if (!char) return;
    if (!char.startsWith('0x')) return char
    const seat = "***";
    const seat_ = "...";
    let char_ = char;
    if (!char) return;
    if (char_.length < num) return char_;
    char_ = char.slice(0, num).concat(seat).concat(char.slice(-num));
    if (char.indexOf("0x") === -1) {
        char_ = char;
        if (char.length > 20) {
            char_ = char.slice(0, 20).concat(seat_);
        }
    }
    return char_;
}
const findKey = (targetValue: any, item: any) => {
    let key = ''
    for (let i in item) {
        if (targetValue == item[i]) {
            key = i
        }
    }
    return key
}
function openAddressUrl(data: any, addressStr: any) {
    const PesonURL = '/address/';
    const BrowserURL = '/entity/';
    const key = findKey(addressStr, data.contentText)
    console.log('跳转地址', key, addressStr, data.contentText)
    // return
    if (!key) return
    if (key == 'address' || key == 'fromTag' || key == 'fromEntityId') {
        if (data.contentText.fromAddressType == 'fund' || data.contentText.fromAddressType == 'cex') {
            window.open(`${BrowserURL}${data.contentText.fromEntityId || data.contentText.address}`)
        }
        if (data.contentText.fromAddressType == 'eoa') {
            window.open(`${PesonURL}${data.contentText.address}`)
        }
    }
    if (key == 'toAddress' || key == 'toTag' || key == 'toEntityId') {
        if (data.contentText.toAddressType == 'fund' || data.contentText.toAddressType == 'cex') {
            window.open(`${BrowserURL}${data.contentText.toEntityId || data.contentText.address}`)
        }
        if (data.contentText.toAddressType == 'eoa') {
            window.open(`${PesonURL}${data.contentText.toAddress}`)
        }
    }
}
//是否简短地址
function isShortAddress(ad: string | undefined) {
    if (!ad) return ''
    if (ad.startsWith('0x')) {
        return intercept(ad)
    } else return ad.toUpperCase()
}
function goDetails(str: string | undefined) {
    if (!str) return
    if (router.currentRoute.value.path == '/') {
        core.switchCoinByName(str)
    } else {
        window.open("/coin/" + str);
    }
}
// 判断数量是否是负数
function isBurde() {
    return String(layout.contentText.lastChangeToken.changeBalance).includes('-')
}

</script>

<style scoped lang="less">
.bigContent {
    font-size: 12px;
    font-family: var(--font-family);
    width: 300px;
    margin-top: 10px;
}

.text-link {
    cursor: pointer;

    &:hover {
        text-decoration: underline;
    }
}

.contentText {
    font-size: 12px;
    font-family: var(--font-family);
    width: 300px;
    padding: 5px;

    // height: 80px;
    &:hover .symbol {
        text-decoration: underline;
        cursor: pointer;
    }
}

.pb-2 {
    color: #848E9C;
    font-size: 12px !important;
}

.icon {}

:deep(.v-overlay__content) {
    // position: relative;
    min-width: fit-content !important;
    background-color: #313131 !important;
    bottom: 3% !important;
    right: 2% !important;
}

:deep(.num-txt) {
    font-size: 12px !important;
    font-weight: 400;
    font-family: var(--font-family) !important;
}
</style>